import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './linkfooter.css'
import { gundong } from '../../utils/common'

class LinkFooter extends Component {
    
    static propTypes={
        data:PropTypes.arrayOf(PropTypes.shape({
            img:PropTypes.string.isRequired,
            name: PropTypes.string.isRequired,
            time:PropTypes.string.isRequired,
            desc: PropTypes.string.isRequired
        })).isRequired
    }

    state={
        oneStyle:{top:'0px'},
        twoStyle:{top:'37px'}
    }

    gundong=()=>{
        let tag = 1;
        let index = 1;
        const len = this.props.data.length
        if (len <= 1){
            //只有一条数据不滚动
            return
        } 
        setInterval(()=>{
            //调整上一个ul的位置
            if (index == 0) {
                let styletarget = tag == 1 ? 'twoStyle' : 'oneStyle'
                let topnum = parseInt(this.state[styletarget].top)
                this.setState({[styletarget]: {top:`${topnum-37}px`, transition:'top 1s'}})
                setTimeout(()=>{
                    this.setState({[styletarget]: {top:`37px`, transition:'top 0s'}})
                }, 1000)
            }
            //执行滚动
            if (tag == 1) {
                let topnum = parseInt(this.state.oneStyle.top)
                this.setState({oneStyle: {top:`${topnum-37}px`, transition:'top 1s'}})
            } else {
                let topnum = parseInt(this.state.twoStyle.top)
                this.setState({twoStyle: {top:`${topnum-37}px`, transition:'top 1s'}})
            }
            //上一个ul到达最后一条时触发
            if (index == len-1) {
                tag = tag == 1 ? 2 : 1
                index = 0
            } else {
                index++;
            }
        }, 3000)
    }

    componentDidMount = () => {
        this.gundong()
    }

    render() {
        return (
            <div className="linkFooter">
                <ul style={this.state.oneStyle}>
                    {this.props.data.map((v, k)=>(
                        <li key={k}>
                            <img src={v.img} />
                            <span>{v.name}</span><i></i>
                            <span>{v.time}</span><i></i>
                            <span>{v.desc}</span>
                        </li>
                    ))}
                </ul>
                <ul style={this.state.twoStyle}>
                    {this.props.data.map((v, k)=>(
                        <li key={k}>
                            <img src={v.img} />
                            <span>{v.name}</span><i></i>
                            <span>{v.time}</span><i></i>
                            <span>{v.desc}</span>
                        </li>
                    ))}
                </ul>
            </div>
        )
    }
}

export default LinkFooter